*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 手机优先 */

/* 容器设置 */
.container {
  padding-left: 15px;
  padding-right: 15px;
}
.row{
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.row > [class*="col-"]{
  padding-left: 15px;
  padding-right: 15px;
}

.col-xs-1{
  width: 8.33333333%;
}

/* 8等份 */
.col-xs-1dot5{
  width: 12.5%;
}

/* 7等份 */
.col-xs-1dot7{
  width: 14.28571428%;
}
.col-xs-2{
  width: 16.66666667%;
}
/* 5等份 */
.col-xs-2dot4{
  width: 20%;
}
.col-xs-3{
  width: 25%;
}
.col-xs-4{
  width: 33.33333333%;
}
.col-xs-5{
  width: 41.66666667%;
}
.col-xs-6{
  width: 50%;
}
.col-xs-7{
  width: 58.33333333%;
}
.col-xs-8{
  width: 66.66666667%;
}
.col-xs-9{
  width: 75%;
}
.col-xs-10{
  width: 83.33333333%;
}
.col-xs-11{
  width: 91.66666667%;
}
.col-xs-12{
  width: 100%;
}

/* 平板 */
@media screen and (min-width: 768px){
  
  .container{
    width: 750px;
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
  }

  .col-sm-1{
    width: 8.33333333%;
  }
  .col-sm-1dot5{
    width: 12.5%;
  }
  .col-sm-1dot7{
    width: 14.28571428%;
  }
  .col-sm-2{
    width: 16.66666667%;;
  }
  .col-sm-2dot4{
    width: 20%;
  }
  .col-sm-3{
    width: 25%;
  }
  .col-sm-4{
    width: 33.33333333%;
  }
  .col-sm-5{
    width: 41.66666667%;
  }
  .col-sm-6{
    width: 50%;
  }
  .col-sm-7{
    width: 58.33333333%;
  }
  .col-sm-8{
    width: 66.66666667%;
  }
  .col-sm-9{
    width: 75%;
  }
  .col-sm-10{
    width: 83.33333333%;
  }
  .col-sm-11{
    width: 91.66666667%;
  }
  .col-sm-12{
    width: 100%;
  }
}

/* 中等屏幕 */
@media screen and (min-width: 992px){

  .container{
    width: 970px;
  }

  .col-md-1{
    width: 8.33333333%;
  }
  .col-md-1dot5{
    width: 12.5%;
  }
  .col-md-1dot7{
    width: 14.28571428%;
  }
  .col-md-2{
    width: 16.66666667%;;
  }
  .col-md-2dot4{
    width: 20%;
  }
  .col-md-3{
    width: 25%;
  }
  .col-md-4{
    width: 33.33333333%;
  }
  .col-md-5{
    width: 41.66666667%;
  }
  .col-md-6{
    width: 50%;
  }
  .col-md-7{
    width: 58.33333333%;
  }
  .col-md-8{
    width: 66.66666667%;
  }
  .col-md-9{
    width: 75%;
  }
  .col-md-10{
    width: 83.33333333%;
  }
  .col-md-11{
    width: 91.66666667%;
  }
  .col-md-12{
    width: 100%;
  }

}

/* 大型屏幕 */
@media screen and (min-width: 1200px){

  .container{
    width: 1170px;
  }

  .col-lg-1{
    width: 8.33333333%;
  }
  .col-lg-1dot5{
    width: 12.5%;
  }
  .col-lg-1dot7{
    width: 14.28571428%;
  }
  .col-lg-2{
    width: 16.66666667%;;
  }
  .col-lg-2dot4{
    width: 20%;
  }
  .col-lg-3{
    width: 25%;
  }
  .col-lg-4{
    width: 33.33333333%;
  }
  .col-lg-5{
    width: 41.66666667%;
  }
  .col-lg-6{
    width: 50%;
  }
  .col-lg-7{
    width: 58.33333333%;
  }
  .col-lg-8{
    width: 66.66666667%;
  }
  .col-lg-9{
    width: 75%;
  }
  .col-lg-10{
    width: 83.33333333%;
  }
  .col-lg-11{
    width: 91.66666667%;
  }
  .col-lg-12{
    width: 100%;
  }

}